<template>
    <div>
        <div v-if="show">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
                <el-form-item label="客户名称" prop="cId">
                    <el-select v-model="formInline.cId" placeholder="请选择送货仓库">
                        <el-option v-for="item in options" :key="item.cId" :label="item.name" :value="item.cId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否月租" prop="month">
                    <el-select v-model="formInline.month" placeholder="请选择送货仓库">
                        <el-option v-for="item in Monthly" :key="item.month" :label="item.name" :value="item.month"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租赁类型" prop="category">
                    <el-select v-model="formInline.category" placeholder="请选择送货仓库">
                        <el-option v-for="item in Lease" :key="item.category" :label="item.name" :value="item.category"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租赁开始时间">
                    <el-date-picker v-model="formInline.start" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="租赁结束时间">
                    <el-date-picker v-model="formInline.end" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
                    <el-button @click="reach()" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="Newexportsearchrefresh">
            <div class="Addexport">
                <el-button type="primary" plain icon="el-icon-plus" @click="addLists()">新增</el-button>
                <el-button type="warning" plain icon="el-icon-download" class="yello-button" @click="exports()">导出</el-button>
            </div>
            <div class="Searchrefresh">
                <el-tooltip placement="top">
                    <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                    <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
                </el-tooltip>
            </div>
        </div>
        <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>
            <el-table-column prop="uId" label="用户ID" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.uId == 0 ? '郑总' : '' }}
                </template>
            </el-table-column>
            <el-table-column prop="start" label="租赁开始时间" width="120" align="center"> </el-table-column>
            <el-table-column prop="end" label="租赁结束时间" width="120" align="center"> </el-table-column>
            <el-table-column prop="address" label="租赁时长" width="300" align="center">
                <template slot-scope="scope"> {{ scope.row.end | time(scope.row.start) }}天 </template>
            </el-table-column>
            <el-table-column prop="month" label="是否月租" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.month == 0 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="category" label="租赁类型" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.category == 0 ? '托盘' : scope.row.category == 2 ? '立方' : '平方' }}
                </template>
            </el-table-column>
            <el-table-column prop="number" label="租赁数量" width="120" align="center"> </el-table-column>
            <el-table-column prop="price" label="租赁单价" width="120" align="center"> </el-table-column>
            <el-table-column prop="days" label="租赁费用/天" width="120" align="center"> </el-table-column>
            <el-table-column prop="payTotal" label="租赁总价" width="120" align="center"> </el-table-column>
            <el-table-column prop="payTotal" label="已支付金额" width="120" align="center"> </el-table-column>
            <el-table-column prop="notPayTotal" label="未支付金额" width="120" align="center"> </el-table-column>
            <el-table-column prop="payDays" label="已支付天数" width="120" align="center"> </el-table-column>
            <el-table-column prop="notPayDays" label="未支付天数" width="120" align="center"> </el-table-column>
            <el-table-column prop="isPay" label="是否已经付款" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.isPay == 1 ? '已付款' : '未付款' }}
                </template>
            </el-table-column>
            <el-table-column prop="prick" label="是否已经扎帐" width="120" align="center"
                ><template slot-scope="scope">
                    {{ scope.row.prick == 1 ? '未扎帐' : '已扎帐' }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" icon="el-icon-edit" @click="record">记录明细</el-button>
                    <el-button type="text" size="small" icon="el-icon-edit" @click="pay">缴费确认</el-button>
                    <el-button type="text" size="small" icon="el-icon-edit" @click="modify(scope.row)">变更</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据分页 -->
        <div class="block">
            <el-pagination
            style="float:right;"
            background
            v-if="hide"
                @size-change="handleSizeCha"
                @current-change="handleCurrentCha"
                :current-page="formInline.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加和修改 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item label="客户名称" prop="cId" :label-width="formLabelWidth">
                    <el-select v-model="form.cId" placeholder="请选择送货仓库" style="width:100%">
                        <el-option v-for="item in options" :key="item.cId" :label="item.name" :value="item.cId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否月租" prop="month" :label-width="formLabelWidth">
                    <el-select v-model="form.month" placeholder="请选择是否月租" style="width:100%">
                        <el-option v-for="item in Monthly" :key="item.month" :label="item.name" :value="item.month"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租赁类型" prop="category" :label-width="formLabelWidth">
                    <el-select v-model="form.category" placeholder="请选择租赁类型" style="width:100%">
                        <el-option v-for="item in Lease" :key="item.category" :label="item.name" :value="item.category"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租赁数量" prop="number" :label-width="formLabelWidth">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="price" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="租赁费用/天" prop="days" :label-width="formLabelWidth">
                    <el-input v-model="form.days" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="租赁开始时间" prop="start" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.start" style="width:100%" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                </el-form-item>
                <el-form-item label="租赁结束时间" prop="end" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.end" style="width:100%" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                </el-form-item>
                <el-form-item label="是否已经付款" prop="isPay" :label-width="formLabelWidth">
                    <el-select v-model="form.isPay" style="width:100%">
                        <el-option v-for="item in payment" :key="item.isPay" :label="item.name" :value="item.isPay"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否已经扎帐" prop="prick" :label-width="formLabelWidth">
                    <el-select v-model="form.prick" style="width:100%">
                        <el-option v-for="item in anaccount" :key="item.prick" :label="item.name" :value="item.prick"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Modificationandaddition()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- <li v-for="item in list" :key="item"></li> -->
    </div>
</template>

<script>
import { customer, storagelist, Newuserwarehouse, Paymentconfirmation } from '../../api/user.js';
export default {
    data: function () {
        return {
            // 搜索框
            formInline: {
                pageNum: 1,
                pageSize: 10
            },
            // 客户名称
            options: [],
            // 是否月租
            Monthly: [
                {
                    month: 0,
                    name: '是'
                },
                {
                    month: 1,
                    name: '否'
                }
            ],
            // 租赁类型
            Lease: [
                {
                    category: 0,
                    name: '托盘'
                },
                {
                    category: 1,
                    name: '平方'
                },
                {
                    category: 2,
                    name: '立方'
                }
            ],
            // 显示隐藏
            show: true,
            disabled: false,
            // 数据
            tableData: [],
            // 数据总条目数
            total: undefined,
            // 添加和修改表单
            form: {},
            // 付款
            payment: [
                {
                    name: '未付款',
                    isPay: 0
                },
                {
                    isPay: 1,
                    name: '已付款'
                }
            ],
            // 扎帐
            anaccount: [
                {
                    name: '未扎帐',
                    prick: 0
                },
                {
                    prick: 1,
                    name: '已扎帐'
                }
            ],
            // 新增和修改弹窗
            dialogFormVisible: false,
            title: undefined,
             formLabelWidth: '100px',
             hide:false
        };
    },
    methods: {
        // 客户名称
        opname() {
            customer().then((ref) => {
                // console.log(ref);
                this.options = ref.rows;
            });
        },
        // 搜索框
        onSubmit() {
            storagelist(this.formInline).then((ref) => {
                // console.log(ref);
                this.tableData = ref.rows;
                this.total = ref.total;
                if(ref.rows == ''){
                    this.hide=false
                }else{
                    this.hide = true
                }
            });
        }, // 搜索框显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
        // 页面分页
        handleSizeCha(val) {
            this.formInline.pageSize = Number(val);
            this.onSubmit();
        },
        // 页面分页(几个)
        handleCurrentCha(val) {
            this.formInline.pageNum = Number(val);
            this.onSubmit();
        },
        // 记录明细
        record() {
            this.$router.push({
                path: '/i18n'
            });
        },
        // 缴费确认
        pay() {
            this.$router.push({
                path: '/dialog'
            });
        },
        // 新增弹窗
        addLists() {
            this.dialogFormVisible = true;
            this.title = '添加仓储费用管理';
        },
        // 新增和修改
        Modificationandaddition() {
            if (this.form.id) {
                Paymentconfirmation(this.form).then((ref) => {
                    this.dialogFormVisible = false;
                    this.onSubmit();
                    console.log(ref);
                    this.$refs.form.resetFields();
                     this.$message({
          message: '修改成功',
          type: 'success'
        });
                });
            } else {
                Newuserwarehouse(this.form).then((ref) => {
                    console.log(ref);
                    this.dialogFormVisible = false;
                    this.onSubmit();
                    this.$refs.form.resetFields();
                                         this.$message({
          message: '新增成功',
          type: 'success'
        });
                });
            }
        },
        // 变更
        modify(val) {
            console.log(val);
            this.form = val;
            // console.log(this.form.id);
            this.dialogFormVisible = true;
            this.title = '修改仓储费用管理';
        },
        // 重置
        reach(){
             this.$refs.formInline.resetFields();
        }
    },
    mounted() {
        this.opname();
        this.onSubmit();
    },
    filters: {
        time(end, start) {
            let times = new Date(end) - new Date(start);
            times = times / (1000 * 3600 * 24);
            return times;
        }
    }
};
</script>

<style scoped lang="less">
.Newexportsearchrefresh {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
/deep/.el-form--inline .el-form-item__label{
    font-weight: 700 !important;
}
/deep/.el-form-item__label{
    font-weight:700 !important ;
}
/deep/.el-dialog{
width: 35% !important;
}
.block{
    height: 20px;
    margin-top: 10px;
}
</style>